<template>
    <n-form-item :label="data.label" :path="data.code">
        <div class="enum-box">
            <n-button type="primary" @click="onAdd">
                <template #icon>
                    <n-icon>
                        <Add />
                    </n-icon>
                </template>
                添加
            </n-button>
            <div class="list-box">
                <div
                    v-for="(item, index) in data.value"
                    :key="index"
                    class="list-item"
                >
                    <n-input
                        v-model:value="item.label"
                        clearable
                        placeholder="请输入枚举值"
                    />
                    <n-input
                        v-model:value="item.key"
                        clearable
                        placeholder="请输入枚举编码"
                    />
                    <n-icon
                        :size="20"
                        class="delete-icon"
                        @click="onDelete(index)"
                    >
                        <TrashOutline />
                    </n-icon>
                </div>
            </div>
        </div>
    </n-form-item>
</template>

<script setup>
import { Add, TrashOutline } from '@vicons/ionicons5';
import { createDiscreteApi } from 'naive-ui';

const { message } = createDiscreteApi(['message']);
const props = defineProps({
    data: {
        type: Object,
        default: () => ({})
    },
    formConfig: {
        type: Array,
        default: () => []
    }
});

const onAdd = () => {
    const hasNull = props.data.value.some(item => {
        return !item.key || !item.label;
    });
    if (hasNull) {
        message.error('请填写完整，再继续添加');
        return;
    }
    props.data.value.push({
        key: '',
        label: ''
    });
};
const onDelete = i => {
    props.data.value.splice(i, 1);
};
console.log(`output->props`, props.data, props.formConfig);
</script>
<style lang="less" scoped>
.enum-box {
    .list-box {
        .list-item {
            margin-top: 8px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
    }

    .delete-icon {
        cursor: pointer;
        border-radius: 2px;
        &:hover {
            background-color: var(--grey-300);
        }
    }
}
</style>
